
<script src="https://d3js.org/d3.v5.min.js"></script>

<body>
<label id="label1"></label>
</body>
<script>

//-------------------------------------Class Helix---------------------------------------------
function Helix(colSize, rowSize){
	var col = colSize || 5, row = rowSize || 5;
	var limit = { minCol:0, minRow:0, maxCol:col - 1, maxRow:row -1 };
	var index = 0, direction = 0;
	var datas = { 0:{ x:0, y:0 } };
	this.elements = { 0:0 };
	
	this.move = function(d){
		var tp = {
			0: function(){ datas[index] = { x:datas[index - 1].x + 1, y:datas[index - 1].y }; },
			1: function(){ datas[index] = { x:datas[index - 1].x, y:datas[index - 1].y + 1 }; },
			2: function(){ datas[index] = { x:datas[index - 1].x - 1, y:datas[index - 1].y }; },
			3: function(){ datas[index] = { x:datas[index - 1].x, y:datas[index - 1].y - 1 }; },
		}[d]();
		//// 格子方块索引 (对应按行顺序排列位置)
		this.elements[index] = datas[index].y * col + datas[index].x;
	};
	
	//// 转向时缩小相关边界
	this.chenge = function(d){
		return {
			0: function(){ limit.minRow++; },
			1: function(){ limit.maxCol--; },
			2: function(){ limit.maxRow--; },
			3: function(){ limit.minCol++; },
		}[d]();
	}
	
	while(index++< col * row){
		var p = datas[index - 1], d = direction % 4;
		//// 判断转向
		if((p.x==limit.maxCol && d==0)|| (p.y==limit.maxRow && d==1) || 
			(p.x==limit.minCol && d==2) || (p.y==limit.minRow && d==3)){
			this.chenge(direction++ % 4);
		}
		//// 在当前方向上移动
		this.move(direction % 4);
	}
}
//-------------------------------------End Class Helix---------------------------------------------

var h = new Helix();

function cout(obj){
	console.log(obj);
}

var svg = d3.select("body")
		.append("svg")
		.attr("width", 500)
		.attr("height", 500)
		.append("g");

	svg.append('g').append("rect").attr("x", 10)
			.attr("y", 10)
			.attr("width", 100)
			.attr("height", 100)
//			.raise()
	;

	var rect = svg//.append('g')
			.append("rect").attr("x", 50)
			.attr("y", 50)
			.attr("width", 100)
			.attr("height", 100)
			.style('fill', 'red')

	;

	rect.transition()
			.duration(200)
			//.ease("linear")
			.attr('x', 100)
	svg.on("touchstart", function(d){
		document.getElementById("label1").innerHTML =
		console.log(d)
	});

</script>
